import React, { ReactNode } from 'react'
import BraftEditor, { EditorState, ExtendControlType } from 'braft-editor'

interface ExperiencePageProps {

}

interface ExperiencePageState {
    editorState: EditorState;
}

export class ExperiencePage extends React.Component<ExperiencePageProps, ExperiencePageState> {
    constructor (props: ExperiencePageProps) {
        super(props)
        this.state = {
            editorState: BraftEditor.createEditorState(null)
        }
    }

    handleChange = (editorState: EditorState): void => {
        this.setState({ editorState })
    }

    printContent = (): void => {
        console.log(this.state.editorState.toRAW())
    }

    render (): ReactNode {
        const extendControls: ExtendControlType[] = [
            {
                key: 'custom-button',
                type: 'button',
                text: '按钮',
                onClick: this.printContent
            }
        ]
        return (
            <BraftEditor value={this.state.editorState} onChange={this.handleChange} extendControls={extendControls}/>
        )
    }
}

export default ExperiencePage
